<script setup lang="ts">

import { ref,defineProps} from 'vue';
import {uesGroupStore} from '@/stores'
import {generateUUID} from '@/utils/uuid'
const groupStore = uesGroupStore()

const propos = defineProps({
    item:{
        type:Object,
        default:{}   
    }
})
const newTitle = ref('')
const isEdit = ref(false)
//启用编辑标题
const editTitle = ()=>{
    newTitle.value = propos.item.title
    isEdit.value = true
}
//改变标题
const changeTitle = ()=>{
    if(!newTitle.value.trim())
    {
        //@ts-ignore
        ElMessage.error('标题不能为空哦＞︿＜')
    }
    else
    {
        groupStore.changeGroupTitle(propos.item.id,newTitle.value)
        isEdit.value = false
    }
    
}
//取消编辑
const cancelChange = ()=>{
    isEdit.value = false
}
//键盘回车确定编辑
const enterInput = (e:any)=>
{
    if(e.key === 'Enter')
    {
        changeTitle()
    }
}

const rmDialogVisible = ref(false)
const deleteModel = ref('item') 
const itemId = ref('')
const buttonDeleteItem = (id:string)=>{
    rmDialogVisible.value = true
    itemId.value = id
    deleteModel.value = 'item'
}
const buttonDeleteGroup = ()=>{
    rmDialogVisible.value = true
    deleteModel.value = 'group'
}
const deleteElement = ()=>{
    if(deleteModel.value === 'item')
    {
        groupStore.removeItem(propos.item.id,itemId.value)
    }
    else
    {
        groupStore.removeGroup(propos.item.id)
    }
    rmDialogVisible.value = false
}


const addUrl = ref('')
const addTitle = ref('')
const addDialogVisible = ref(false)

const addItem = ()=>{
    if(addUrl.value && addTitle.value)
    {
        const url = 'http://' + addUrl.value 
        const obj = {id:generateUUID(),url,title:addTitle.value}
        groupStore.addItem(propos.item.id,obj)
        addDialogVisible.value = false
    }
    else
    {
        //@ts-ignore
        ElMessage.error('亲~你还有内容没输入呢！(～￣▽￣)～')
    }
}
const showAddDialog =()=>{
    addTitle.value =''
    addUrl.value = ''
    addDialogVisible.value = true
    console.log('aaa')
}
const enterAddItem = (e:any)=>{
    if(e.key === 'Enter')
    {
        addItem()
    }
}

</script>
<template>
    <div class="box">
        <div class="head">
            <el-icon class="icon" :size="24" color="#d81e06"><Menu /></el-icon>
            <span @click="editTitle">
                <el-icon size="15"><Edit /></el-icon>
                编辑
            </span>
            <div v-if="isEdit" class="input">
                <el-input class="text" type="text" v-model="newTitle" @keydown="enterInput"/>
                <el-button class="button" type="success" @click="changeTitle">完成</el-button>
                <el-button class="button" type="warning" @click="cancelChange">取消</el-button>
                <el-button class="button" type="danger" @click="buttonDeleteGroup">删除</el-button>
            </div>
            <h1 class="title" v-else>
                {{propos.item.title}}
            </h1>
        </div>
        <div class="item">
            <el-row>
                <el-col class="col" :span="3" v-for="item in propos.item.items" :key="item.id">
                    <WebItemCard :item="item" :parentId="propos.item.id" @delete="buttonDeleteItem"></WebItemCard>
                </el-col>
                <el-col :span="3">
                    <AddItem @addItem="showAddDialog"></AddItem>
                </el-col>
            </el-row>
            <el-dialog title="警告" width="30%" center v-model="rmDialogVisible">
                <span>你是否要删除此项</span>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button type="danger" @click="deleteElement">
                            确定
                        </el-button>
                        <el-button type="primary" @click="rmDialogVisible = false">
                            取消
                        </el-button>
                      </span>
                    </template>
            </el-dialog>
            <el-dialog title="添加新的快捷方式" width="30%" center v-model="addDialogVisible">
            <div class="input">
                <p>URL</p>
                <el-input placeholder="Please input" v-model="addUrl" @keydown="enterAddItem">
                    <template #prepend>http://</template>
                </el-input>
                <p>名称</p>
                <el-input placeholder="Please input" v-model="addTitle" @keydown="enterAddItem"/>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="success" @click="addItem">
                    确定
                </el-button>
                <el-button type="primary" @click="addDialogVisible=false">
                    取消
                </el-button>
              </span>
            </template>
        </el-dialog>
        </div>
    </div>
</template>
<style scoped>
.box
{
    margin-bottom: 20px;
}

.box .head .title
{
    margin: 0;
    font-size: 24px;
    color: white;
}
.box .head:hover
{
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.2s;
}

.box .head .icon
{
    margin-top: 5px;
    margin-right: 10px;
    float: left;
}
.box .head span
{
    cursor: pointer;
    margin-top: 5px;
    margin-right: 30px;
    display: none;
    float: right;
    color: white;
}
.box .head:hover span
{
    display: block;
    transition: all 0.2s;
}
.box .head .input .text
{
    width: 200px;
}
.box .head .input .button
{
    margin-left: 10px;
}
.box .item
{
    width: 95%;
    margin: 10px auto;
}
.box .item .col
{
    margin-bottom: 15px;
}
</style>